<template>
	<view class="animated fadeInLeft faster body">
		<!-- tabbar切换 -->
		<swiper-tab-head :tabBars="tabBars" :tabindex="tabindex" @tabtap="tabtap" 
		 scrollItemStyle="width:33%;" scrollStyle="border-bottom:0;">
		</swiper-tab-head>
		<!-- 好友列表 -->
		
		<!-- <block v-for="(item,index) in list" :key="index">
			<user-list :item="item" :index="index"></user-list>
		</block> -->
		
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperheight+'px'}" :current="tabindex" @change="tabChange">
				<swiper-item v-for="(items,index) in newslist" :key="index">
					<scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">
						<template v-if="items.list.length>0">
							<!-- 图文列表 -->
							<block v-for="(item,index1) in items.list" :key="index1">
											<user-list :item="item" :index="index1"></user-list>
							</block>
							<!-- 上拉加载更多 -->
							<load-more :loadtext="items.loadtext"></load-more>
		
						</template>
						
						<template v-else>
							<!-- 无内容默认 -->
							<nothing></nothing>
							
						</template>
						
								
					</scroll-view>
				</swiper-item>
		
			</swiper>
		</view>
		
		
		
	</view>
</template>

<script>
	import swiperTabHead from "../../components/index/swiper-tab-head.vue";
	import loadMore from "../../components/common/load-more.vue";
	import userList from "../../components/user-list/user-list.vue";
	import nothing from "../../components/common/nothing.vue";
	export default {
		components:{
			swiperTabHead,
			loadMore,
			userList,
			nothing
		},
		data() {
			return {
				tabindex:0,
				swiperheight: 700,
				tabBars: [
					{name: "互关",id: "huguan",num:10},
					{name: "关注",id: "guanzhu",num:20},
					{name: "粉丝",id: "fensi",num:10}
				],
				newslist:[
					{
						loadtext:"上拉加载更多",
						list:[
							{
								userpic:"../../static/demo/userpic/10.jpg",
								username:"Supzeol",
								age:23,
								sex:0,//0是男，1是女
								isguanzhu:true
							},
							{
								userpic:"../../static/demo/userpic/9.jpg",
								username:"Supzeol",
								age:23,
								sex:1,//0是男，1是女
								isguanzhu:true
							},
							{
								userpic:"../../static/demo/userpic/8.jpg",
								username:"Supzeol",
								age:23,
								sex:1,//0是男，1是女
								isguanzhu:true
							},
							{
								userpic:"../../static/demo/userpic/7.jpg",
								username:"Supzeol",
								age:23,
								sex:1,//0是男，1是女
								isguanzhu:true
							},
							{
								userpic:"../../static/demo/userpic/6.jpg",
								username:"Supzeol",
								age:23,
								sex:1,//0是男，1是女
								isguanzhu:true
							},
							{
								userpic:"../../static/demo/userpic/5.jpg",
								username:"Supzeol",
								age:23,
								sex:1,//0是男，1是女
								isguanzhu:true
							},
							{
								userpic:"../../static/demo/userpic/4.jpg",
								username:"Supzeol",
								age:23,
								sex:1,//0是男，1是女
								isguanzhu:true
							},
							{
								userpic:"../../static/demo/userpic/3.jpg",
								username:"Supzeol",
								age:23,
								sex:1,//0是男，1是女
								isguanzhu:true
							},
						]
					},
					{
						loadtext:"上拉加载更多",
						list:[
						
						]
					},
					{
						loadtext:"上拉加载更多",
						list:[
							{
								userpic:"../../static/demo/userpic/6.jpg",
								username:"Supzeol",
								age:23,
								sex:0,//0是男，1是女
								isguanzhu:false
							},
							{
								userpic:"../../static/demo/userpic/6.jpg",
								username:"Supzeol",
								age:23,
								sex:1,//0是男，1是女
								isguanzhu:false
							},
						]
					}
				]
				
				
				
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100);
					this.swiperheight = height;
				}
			});
		
		},
		// 监听导航栏按钮事件
		onNavigationBarButtonTap(e) {
			if (e.index==0) {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		methods: {
			// 点击事件：获取到点击tab内容的tabindex值，达到内容的切换
			tabtap(index) {
				this.tabindex = index;
			},
			// 滑动事件：获取到滑动是内容的tabindex值  从而下划线有滑动效果
			tabChange(e) {
				this.tabindex = e.detail.current;
			},
			// 上拉加载
			loadmore(index){
				if (this.newslist[index].loadtext!="上拉加载更多") {
					return;
				} 
				// 修改状态（加载状态）
				this.newslist[index].loadtext="加载中"
				// 获取数据
				setTimeout(()=> {
					// 获取完成状态
					// 一条模拟数据
					let obj={
						userpic:"../../static/demo/userpic/5.jpg",
						username:"xxl",
						age:23,
						sex:1,//0是男，1是女
						isguanzhu:true
					};
					this.newslist[index].list.push(obj);
					this.newslist[index].loadtext="上拉加载更多";
				}, 1000);
				// this.newslist[index].loadtext="到底了"
			}
		}
	}
</script>

<style>
.uni-flex{
	display: flex;
}





</style>
